/*
 * 有赞授权信息组件
 * @Author: ljb
 * @Date: 2018-09-27 16:29:58
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-28 18:12:39
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-component-youzan-authorize-info {
        display: flex;
        width: 100%;
        height: 100%;
        background-color: #fff;
        & > div {
            &.l-content {
                width: 600px;
                height: 100%;
                padding-top: 80px;
                padding-left: 120px;
                box-sizing: border-box;
                color: #43425D;
                /*左侧标题样式*/
                .title {
                    font-size: 22px;
                    font-weight: 400;
                    line-height: 29px;
                }
                /*左侧标题样式 END*/
                /*左侧信息样式*/
                .info-lists {
                    margin-top: 30px;
                    margin-bottom: 32px;
                    list-style: none;
                    li {
                        display: flex;
                        font-size: 12px;
                        &:not(:last-child) {
                            margin-bottom: 20px;
                        }
                        span {
                            &.label {
                                min-width: 15%;
                                white-space: nowrap;
                                color: #9E9DB4;
                                text-align: justify;
                            }
                        }
                        a {
                            color: #2D8CF0;
                        }
                        img {
                            width: 50px;
                            height: 50px;
                            vertical-align: top;
                            border: 1px solid #f0f0f0;
                        }
                    }
                }
                /*左侧信息样式 END*/
                /*更换授权店铺按钮*/
                .change-btn {
                    color: #2D8CF0;
                    font-size: 14px;
                }
                /*更换授权店铺按钮 END*/
            }
            &.r-content {
                position: relative;
                width: 500px;
                height: 100%;
                background-color: #43425D;
                .qrcode {
                    position: absolute;
                    top: 50px;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                    width: 350px;
                    height: 350px;
                    overflow: hidden;
                    font-size: 0;
                    text-align: center;
                    img {
                        width: 100%;
                    }
                }
                p {
                    position: absolute;
                    bottom: 38px;
                    width: 100%;
                    font-size: 18px;
                    font-weight: 300;
                    line-height: 24px;
                    text-align: center;
                    color: #fff;
                }
            }
        }
    }

</style>
<template>
	<div class="v-component-youzan-authorize-info">
		<div class="l-content">
			<h3 class="title">{{ $t('youzan.auth_store_info') }}</h3>
			<ul class="info-lists">
				<li>
					<span class="label">{{ $t('youzan.store_name') + $t('common.colon') }}<span/></span>
					<span>{{ showInfo.youzan_store_name || $t('common.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('youzan.store_id') + $t('common.colon') }}<span/></span>
					<span>{{ showInfo.youzan_store_id || $t('common.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('youzan.store_url') + $t('common.colon') }}<span/></span>
					<a
						:href="showInfo.url"
						target="_blank"
						class="url">{{ showInfo.url || $t('common.unknown') }}</a>
				</li>
				<li>
					<span class="label">{{ $t('youzan.store_address') + $t('common.colon') }}<span/></span>
					<span>{{ showInfo.physical_url || $t('common.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('youzan.auth_type') + $t('common.colon') }}<span/></span>
					<span>{{ cert_status_map[parseInt(showInfo.cert_type)] || $t('common.unknown') }}</span>
				</li>
				<li>
					<span class="label">{{ $t('youzan.store_logo') + $t('common.colon') }}<span/></span>
					<img
						:src="showInfo.youzan_store_logo"
						alt="$t('common.unknown')">
				</li>
			</ul>
			<poptip
				:title="$t('youzan.change_tip')"
				transfer
				confirm
				width="200"
				@on-ok="handleOk"
				@on-cancel="handleCancel">
				<a class="change-btn">{{ $t('youzan.change_auth_store') }}</a>
			</poptip>
		</div>
		<div class="r-content">
			<div class="qrcode">
				<img
					:src="authorizerInfo.qr_code"
					alt="">
			</div>
			<p>{{ $t('youzan.youzan_qrcode') }}</p>
		</div>
	</div>
</template>

<script>
export default {
	name: 'AuthorizeInfo',
	props: {
		authorizerInfo: {
			type: Object,
			required: true,
		},
	},
	data() {
		return {
			cert_status_map: {
				0: this.$t('youzan.certified'),
				1: this.$t('youzan.uncertified'),
			},
		};
	},
	computed: {
		showInfo() {
			const auth_info = this.authorizerInfo;
			return auth_info.shop_info || {};
		},
	},
	methods: {
		/**
         * poptip点击确定的回调
         * @return {undefined}
         */
		handleOk() {
			this.$emit('change');
		},

		/**
         * poptip点击取消的回调
         * @return {undefined}
         */
		handleCancel() {
			//
		},
	},
};
</script>
